<template>
  <input @keydown="(e) => onKeydown(e)" type="text" v-model="name" />
  <button @click="clickFn">新增菜</button>
  <div v-for="(item, index) in nameArr" :key="item">
    {{ item }}

    <button @click="() => deleteFn(index)">删除</button>
    <button @click="deleteFn(index)">删除</button>
  </div>
</template>
<script setup>
import { ref } from "vue";

const name = ref("");
const nameArr = ref([]);
const clickFn = () => {
  if (name.value) {
    nameArr.value.push(name.value);
    name.value = "";
  }
};

const deleteFn = (index) => {
  nameArr.value.splice(index, 1);
  return undefined;
};

const onKeydown = (e) => {
  if (e.code === "Enter") {
    clickFn();
  }
};
</script>
<style>
div {
  min-height: 10px;
}
</style>
